<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组响应式变化</title>
</head>
<body>
<div id="app">
    <ul>
        <li :key="index" v-for="(item,index) in list">
            {{item}}
        </li>
    </ul>
    <div>
        <div>{{info.name}}</div>
        <div>{{info.age}}</div>
        <div>{{info.gender}}</div>
    </div>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    /*
    动态响应式数据
     */
    var vue = new Vue({
        el: "#app",
        data: {
            list: ["apple", "orange", "banana"],
            info: {
                name: "laowang",
                age: "18"
            }
        }
    })
    //根据索引修改数据（发现用索引修改的数据不是响应式的）
    // vm.list[1] = "lemon";

    //响应式修改数组数据
    Vue.set(vue.list, 2, "lemon");
    vue.$set(vue.list, 1, "lemon");

    //直接添加对象的值并不是响应式的
    // vue.info.gender = "male";

    //响应式修改对象数据
    vue.$set(vue.info, "gender", "female");
</script>
</body>
</html>
